import React, { useEffect, useState } from 'react';
import { createElement } from 'react';
import { Table, Button, Row, Input, Space, Card } from 'antd';
import { SearchOutlined, ReloadOutlined, DownloadOutlined } from "@ant-design/icons";
import MyModal from '../notification-table/my-modal'
import * as XLSX from 'xlsx';
import "./index.scss"



export interface ExportableTableProps {
  fileName: string;
  getUrl: string;
}





const columns = [
  {
    title: '产品物料编码',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '产品物料名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '规格型号',
    dataIndex: 'specification',
    key: 'specification',
  },
  {
    title: '在库数量',
    dataIndex: 'amount',
    key: 'amount',
  },
  {
    title: '单位',
    dataIndex: 'unit',
    key: 'unit',
  },
  {
    title: '入库批次号',
    dataIndex: 'batchNumber',
    key: 'batchNumber',
  },
  {
    title: '仓库',
    dataIndex: 'warehouse',
    key: 'warehouse',
  },
  {
    title: '库区',
    dataIndex: 'warehouseArea',
    key: 'warehouseArea',
  },
  {
    title: '库位',
    dataIndex: 'warehouseLocation',
    key: 'warehouseLocation',
  },
  {
    title: '供应商编号',
    dataIndex: 'vendorCode',
    key: 'vendorCode',
  },
  {
    title: '供应商名称',
    dataIndex: 'vendorName',
    key: 'vendorName',
  },
  {
    title: '生产工单',
    dataIndex: 'produceNumber',
    key: 'produceNumber',
  },
  {
    title: '入库日期',
    dataIndex: 'date',
    key: 'date',
  },
];



const ExportableTable: React.FC<ExportableTableProps> = ({ fileName, getUrl, ...otherProps }) => {
  const data = [];
  const [dataSource, setDataSource] = useState(data);
  const [searchTerm1, setSearchTerm1] = React.useState("");
  const [searchTerm2, setSearchTerm2] = React.useState("");
  const [searchTerm3, setSearchTerm3] = React.useState("");
  console.log(getUrl);

  function getDataSource() {
    if (getUrl === '') {
      setDataSource([{
        "id": 1,
        "code": "IF2022082404",
        "name": "钢筋",
        "specification": "100mm X  5mm",
        "amount": 7.0,
        "unit": "m",
        "batchNumber": "",
        "warehouse": "原料仓",
        "warehouseArea": "注塑原料区",
        "warehouseLocation": "默认库位",
        "vendorCode": "V00009",
        "vendorName": "江苏南通塑有为塑料制品有限公司",
        "produceNumber": "",
        "date": "2023-06-05 12:00:00"
      }]);
    } else {
      fetch(getUrl)
        .then(response => response.json())
        .then(data => {
          setDataSource(data.data);
        })
    }
  }



  useEffect(() => {
    getDataSource();

  }, [])

  const handleExport = () => {
    const worksheet = XLSX.utils.json_to_sheet(dataSource);
    const workbook = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
    const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
    const blob = new Blob([excelBuffer], { type: 'application/octet-stream' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'table_data.xlsx';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  };

  const handleSearch = () => {
    //console.log(searchTerm1,searchTerm2,searchTerm3);
    //这里的查找是字符串包含 如果要完全匹配改成===
    let filteredData = dataSource;
    if (searchTerm1) {
      filteredData = filteredData.filter(item => item.code.includes(searchTerm1) || item.name.includes(searchTerm1));
    }
    if (searchTerm2) {
      filteredData = filteredData.filter(item => item.batchNumber.includes(searchTerm2));
    }
    if (searchTerm3) {
      filteredData = filteredData.filter(item => item.warehouse.includes(searchTerm3));
    }

    setDataSource(filteredData);
  };

  const resetSearch = () => {
    setSearchTerm1("");
    setSearchTerm2("");
    setSearchTerm3("");
    // 这里恢复初始数据
    getDataSource();
  };


  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const hideModal = () => {
    setIsModalVisible(false);
  };



  return (

    <div style={{ marginTop: 20, marginLeft: 20 }}>
      {/* <Row>
        <Button type="primary" onClick={showModal}>
          Open Modal
        </Button>
        <MyModal open={isModalVisible} onCancel={hideModal}>
          <Card title="Basic Modal" style={{ width: '100%' }}>
            Some contents...
            <Space style={{ marginTop: 16 }} direction="horizontal">
              <Button onClick={hideModal}>Cancel</Button>
              <Button type="primary" onClick={hideModal}>
                OK
              </Button>
            </Space>
          </Card>
        </MyModal>
      </Row> */}
      <Row style={{ marginBottom: 20 }}>
        <Space size="large">
          <Input
            placeholder="请输入物料编号或名称"
            value={searchTerm1}
            onChange={(e) => setSearchTerm1(e.target.value)}
            style={{ width: 200 }}
          />
          <Input
            placeholder="请输入批次号"
            value={searchTerm2}
            onChange={(e) => setSearchTerm2(e.target.value)}
            style={{ width: 200 }}
          />
          <Input
            placeholder="请输入仓库名称"
            value={searchTerm3}
            onChange={(e) => setSearchTerm3(e.target.value)}
            style={{ width: 200 }}
          />
          <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
            搜索
          </Button>
          <Button icon={<ReloadOutlined />} onClick={resetSearch}>
            重置
          </Button>
          <Button onClick={handleExport} icon={<DownloadOutlined />} type="primary" style={{}}>
            导出
          </Button>
        </Space>
      </Row>

      <Row>
        <Table dataSource={dataSource} columns={columns} style={{ width: '100%' }} />
      </Row>

    </div>
  );
};


ExportableTable.displayName = "ExportableTable";
export default ExportableTable;




